<!--内容跟ds1相同，html和css做了分离-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华能集团供应链智慧中枢</title>
    <!-- 引入外部CSS样式表 -->
    <link rel="stylesheet" href="../css/ds2.css">
</head>
<body>
<!-- 头部区域 -->
<header>
    <!-- 主标题 -->
    <h1>华能集团供应链智慧中枢</h1>

    <!-- 时间显示区域 -->
    <div class="showTime">当前时间：2023年11月15日-14时30分25秒</div>

    <!-- 导航栏容器 -->
    <div class="nav-container">
        <!-- 10个导航项，每个都有data-target属性对应内容区块 -->
        <div class="nav-item" data-target="dashboard">供应链总览</div>
        <div class="nav-item" data-target="procurement">采购管理</div>
        <div class="nav-item" data-target="inventory">库存监控</div>
        <div class="nav-item" data-target="logistics">物流追踪</div>
        <div class="nav-item" data-target="suppliers">供应商分析</div>
        <div class="nav-item" data-target="demand">需求预测</div>
        <div class="nav-item" data-target="performance">绩效评估</div>
        <div class="nav-item" data-target="risk">风险预警</div>
        <div class="nav-item" data-target="cost">成本分析</div>
        <div class="nav-item" data-target="reports">报表中心</div>
    </div>
</header>

<!-- 内容区域容器 -->
<div class="content-container">
    <!-- 供应链总览页面 -->
    <div class="content-section active" id="dashboard">
        <h2 class="section-title">供应链总览</h2>

        <!-- 数据卡片网格 -->
        <div class="data-grid">
            <div class="data-card">
                <div class="data-title">在途物资</div>
                <div class="data-value">1,248<span class="data-unit">吨</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">库存周转率</div>
                <div class="data-value">5.8<span class="data-unit">次/月</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">准时交付率</div>
                <div class="data-value">96.7<span class="data-unit">%</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">采购成本</div>
                <div class="data-value">3.2<span class="data-unit">亿元</span></div>
            </div>
        </div>

        <!-- 图表容器 -->
        <div class="chart-container">
            <div class="chart">
                <div class="chart-title">月度物资流动趋势</div>
                <div class="chart-placeholder">图表区域 - 物资流动趋势图</div>
            </div>
            <div class="chart">
                <div class="chart-title">供应商绩效分布</div>
                <div class="chart-placeholder">图表区域 - 供应商绩效图</div>
            </div>
        </div>
    </div>

    <!-- 采购管理页面 -->
    <div class="content-section" id="procurement">
        <h2 class="section-title">采购管理</h2>

        <!-- 数据卡片网格 -->
        <div class="data-grid">
            <div class="data-card">
                <div class="data-title">本月采购订单</div>
                <div class="data-value">342<span class="data-unit">笔</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">采购金额</div>
                <div class="data-value">1.8<span class="data-unit">亿元</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">平均采购周期</div>
                <div class="data-value">15.2<span class="data-unit">天</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">成本节约率</div>
                <div class="data-value">7.3<span class="data-unit">%</span></div>
            </div>
        </div>

        <!-- 表格容器 -->
        <div class="table-container">
            <table>
                <thead>
                <tr>
                    <th>采购项目</th>
                    <th>供应商</th>
                    <th>数量</th>
                    <th>金额(万元)</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>燃煤采购</td>
                    <td>山西能源集团</td>
                    <td>50,000吨</td>
                    <td>3,200</td>
                    <td>已发货</td>
                </tr>
                <tr>
                    <td>设备配件</td>
                    <td>华电机械</td>
                    <td>1,200件</td>
                    <td>850</td>
                    <td>待验收</td>
                </tr>
                <tr>
                    <td>化工原料</td>
                    <td>中化集团</td>
                    <td>800吨</td>
                    <td>1,150</td>
                    <td>运输中</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 库存监控页面 -->
    <div class="content-section" id="inventory">
        <h2 class="section-title">库存监控</h2>

        <!-- 图表容器 -->
        <div class="chart-container">
            <div class="chart">
                <div class="chart-title">库存水平分析</div>
                <div class="chart-placeholder">图表区域 - 库存水平图</div>
            </div>
            <div class="chart">
                <div class="chart-title">库存周转分析</div>
                <div class="chart-placeholder">图表区域 - 库存周转图</div>
            </div>
        </div>

        <!-- 表格容器 -->
        <div class="table-container">
            <table>
                <thead>
                <tr>
                    <th>仓库</th>
                    <th>物资类别</th>
                    <th>当前库存</th>
                    <th>安全库存</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>华北中心仓</td>
                    <td>燃煤</td>
                    <td>125,000吨</td>
                    <td>80,000吨</td>
                    <td>正常</td>
                </tr>
                <tr>
                    <td>华东中心仓</td>
                    <td>设备配件</td>
                    <td>8,500件</td>
                    <td>10,000件</td>
                    <td>预警</td>
                </tr>
                <tr>
                    <td>华南中心仓</td>
                    <td>化工原料</td>
                    <td>3,200吨</td>
                    <td>2,500吨</td>
                    <td>正常</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 物流追踪页面 -->
    <div class="content-section" id="logistics">
        <h2 class="section-title">物流追踪</h2>
        <div class="chart-placeholder" style="height: 400px;">物流追踪可视化图表</div>
    </div>

    <!-- 供应商分析页面 -->
    <div class="content-section" id="suppliers">
        <h2 class="section-title">供应商分析</h2>
        <div class="chart-placeholder" style="height: 400px;">供应商分析可视化图表</div>
    </div>

    <!-- 需求预测页面 -->
    <div class="content-section" id="demand">
        <h2 class="section-title">需求预测</h2>
        <div class="chart-placeholder" style="height: 400px;">需求预测可视化图表</div>
    </div>

    <!-- 绩效评估页面 -->
    <div class="content-section" id="performance">
        <h2 class="section-title">绩效评估</h2>
        <div class="chart-placeholder" style="height: 400px;">绩效评估可视化图表</div>
    </div>

    <!-- 风险预警页面 -->
    <div class="content-section" id="risk">
        <h2 class="section-title">风险预警</h2>
        <div class="chart-placeholder" style="height: 400px;">风险预警可视化图表</div>
    </div>

    <!-- 成本分析页面 -->
    <div class="content-section" id="cost">
        <h2 class="section-title">成本分析</h2>
        <div class="chart-placeholder" style="height: 400px;">成本分析可视化图表</div>
    </div>

    <!-- 报表中心页面 -->
    <div class="content-section" id="reports">
        <h2 class="section-title">报表中心</h2>
        <div class="chart-placeholder" style="height: 400px;">报表中心内容</div>
    </div>
</div>

<!-- 页脚 -->
<footer>
    华能集团供应链智慧中枢 © 2023 | 数据更新时间: 2023-11-15 14:30
</footer>

<!-- JavaScript代码 -->
<script>
    // 时间显示功能
    // 定义定时器变量
    var t = null;
    // 启动定时器：1秒后执行time函数
    t = setTimeout(time, 1000);

    // 时间显示主函数
    function time() {
        // 清除之前的定时器，避免重复堆积
        clearTimeout(t);
        // 创建日期对象，获取当前时间
        dt = new Date();
        // 获取时间各部分
        var y = dt.getFullYear();        // 获取完整年份（4位数）
        var mt = dt.getMonth() + 1;      // 获取月份（0-11，需要+1得到实际月份）
        var day = dt.getDate();          // 获取日期（1-31）
        var h = dt.getHours();           // 获取小时（0-23）
        var m = dt.getMinutes();         // 获取分钟（0-59）
        var s = dt.getSeconds();         // 获取秒钟（0-59）

        // 将时间显示在页面上，格式：当前时间：2020年3月17日-0时54分14秒
        document.querySelector(".showTime").innerHTML =
            '当前时间：' + y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";

        // 重新设置定时器，实现每秒更新
        t = setTimeout(time, 1000); // 设定定时器，循环运行时间更新
    }

    // 页面切换功能
    // 当DOM内容加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有导航项
        const navItems = document.querySelectorAll('.nav-item');
        // 获取所有内容区块
        const contentSections = document.querySelectorAll('.content-section');

        // 为每个导航项添加点击事件监听器
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有导航项的活动状态
                navItems.forEach(nav => nav.classList.remove('active'));
                // 移除所有内容区块的活动状态
                contentSections.forEach(section => section.classList.remove('active'));

                // 为当前点击的导航项添加活动状态
                this.classList.add('active');
                // 获取目标内容区块的ID
                const targetId = this.getAttribute('data-target');
                // 显示对应的内容区块
                document.getElementById(targetId).classList.add('active');
            });
        });
    });
</script>
</body>
</html>